import 'package:bruno/bruno.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getwidget/getwidget.dart';
import 'package:meal/constant/sizes.dart';
import 'package:meal/route/route.dart';
import 'package:meal/utils/colors.dart';
import 'package:meal/utils/styles.dart';
import 'package:meal/utils/tools.dart';

class BankCardAdd extends StatefulWidget {
  const BankCardAdd({Key? key}) : super(key: key);

  @override
  State<BankCardAdd> createState() => _BankCardAddState();
}

class _BankCardAddState extends State<BankCardAdd> {
  bool agree = true;

  double get leftWidth {
    return Sizes.default80;
  }

  double get rowHeight {
    return Sizes.default66;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ToolsUtils.getDefaultBackgroundColor(),
      appBar: ToolsUtils.getDefaultBrnAppBar('添加银行卡'),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              margin: const EdgeInsets.only(top: Sizes.default20),
              padding: const EdgeInsets.symmetric(horizontal: Sizes.default15),
              decoration: const BoxDecoration(color: Colors.white),
              child: ListBody(
                children: [
                  Container(
                    height: rowHeight,
                    padding: const EdgeInsets.symmetric(
                        horizontal: Sizes.default15, vertical: Sizes.default8),
                    child: Row(
                      children: [
                        Container(
                          width: leftWidth,
                          alignment: Alignment.centerLeft,
                          child: Text('国家',
                              style: StylesUtils.customTextStyle(
                                  fontSize: Sizes.default15, color: ColorsUtils.color333)),
                        ),
                        Expanded(
                          child: GestureDetector(
                            child: Container(
                              alignment: Alignment.centerLeft,
                              decoration: BoxDecoration(
                                  color: ColorsUtils.rgba(247, 247, 247, 1),
                                  borderRadius:
                                      const BorderRadius.all(Radius.circular(Sizes.default10))),
                              padding: const EdgeInsets.symmetric(horizontal: Sizes.default15),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Text('请选择',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: Sizes.default15, color: ColorsUtils.color999)),
                                  BrunoTools.getAssetSizeImage(BrnAsset.iconRightArrow, 16, 16)
                                ],
                              ),
                            ),
                            onTap: () {},
                          ),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    height: rowHeight,
                    padding: const EdgeInsets.symmetric(
                        horizontal: Sizes.default15, vertical: Sizes.default8),
                    child: Row(
                      children: [
                        Container(
                          width: leftWidth,
                          alignment: Alignment.centerLeft,
                          child: Text('开户人',
                              style: StylesUtils.customTextStyle(
                                  fontSize: Sizes.default15, color: ColorsUtils.color333)),
                        ),
                        Expanded(
                          child: Container(
                              alignment: Alignment.centerLeft,
                              child: Text(
                                '**默',
                                style: StylesUtils.customTextStyle(
                                    fontSize: Sizes.default15, color: ColorsUtils.color333),
                              )),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    height: rowHeight,
                    padding: const EdgeInsets.symmetric(
                        horizontal: Sizes.default15, vertical: Sizes.default8),
                    child: Row(
                      children: [
                        Container(
                          width: leftWidth,
                          alignment: Alignment.centerLeft,
                          child: Text('开户银行',
                              style: StylesUtils.customTextStyle(
                                  fontSize: Sizes.default15, color: ColorsUtils.color333)),
                        ),
                        Expanded(
                          child: GestureDetector(
                            child: Container(
                              alignment: Alignment.centerLeft,
                              decoration: BoxDecoration(
                                  color: ColorsUtils.rgba(247, 247, 247, 1),
                                  borderRadius:
                                      const BorderRadius.all(Radius.circular(Sizes.default10))),
                              padding: const EdgeInsets.symmetric(horizontal: Sizes.default15),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Text('请选择',
                                      style: StylesUtils.customTextStyle(
                                          fontSize: Sizes.default15, color: ColorsUtils.color999)),
                                  BrunoTools.getAssetSizeImage(BrnAsset.iconRightArrow, 16, 16)
                                ],
                              ),
                            ),
                            onTap: () {},
                          ),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    height: rowHeight,
                    padding: const EdgeInsets.symmetric(vertical: Sizes.default8),
                    child: Row(
                      children: [
                        Container(
                          width: leftWidth,
                          alignment: Alignment.centerLeft,
                          child: Text('银行卡号',
                              style: StylesUtils.customTextStyle(
                                  fontSize: Sizes.default15, color: ColorsUtils.color333)),
                        ),
                        Expanded(
                            child: Container(
                          padding: const EdgeInsets.symmetric(horizontal: Sizes.default10),
                          decoration: BoxDecoration(
                              color: ColorsUtils.rgba(247, 247, 247, 1),
                              borderRadius:
                                  const BorderRadius.all(Radius.circular(Sizes.default10))),
                          child: TextField(
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color363, fontSize: Sizes.default16),
                            decoration: InputDecoration(
                                border: const OutlineInputBorder(
                                  borderSide: BorderSide.none,
                                ),
                                isCollapsed: true,
                                filled: true,
                                fillColor: Colors.transparent,
                                contentPadding: const EdgeInsets.symmetric(
                                    horizontal: Sizes.default10, vertical: Sizes.default10),
                                constraints: const BoxConstraints(minHeight: Sizes.default40),
                                hintText: '请输入银行卡号',
                                hintStyle: StylesUtils.customTextStyle(
                                    fontSize: Sizes.default15, color: ColorsUtils.color999)),
                            keyboardType: TextInputType.number,
                            onChanged: (String content) {},
                          ),
                        ))
                      ],
                    ),
                  ),
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: Sizes.default20),
              decoration: const BoxDecoration(color: Colors.white),
              child: ListBody(
                children: [
                  Container(
                    height: rowHeight,
                    padding: const EdgeInsets.symmetric(
                        horizontal: Sizes.default15, vertical: Sizes.default8),
                    decoration: const BoxDecoration(color: Colors.white),
                    child: Row(
                      children: [
                        Container(
                          width: leftWidth,
                          alignment: Alignment.centerLeft,
                          child: Text('预留手机',
                              style: StylesUtils.customTextStyle(
                                  fontSize: Sizes.default15, color: ColorsUtils.color333)),
                        ),
                        Expanded(
                            child: Container(
                          padding: const EdgeInsets.symmetric(horizontal: Sizes.default10),
                          alignment: Alignment.centerLeft,
                          decoration: BoxDecoration(
                              color: ColorsUtils.rgba(247, 247, 247, 1),
                              borderRadius:
                                  const BorderRadius.all(Radius.circular(Sizes.default10))),
                          child: Row(
                            children: [
                              Text.rich(TextSpan(
                                  text: '+86',
                                  style: StylesUtils.customTextStyle(
                                      fontSize: Sizes.default16, color: ColorsUtils.color363))),
                              Expanded(
                                  child: TextField(
                                style: StylesUtils.customTextStyle(
                                    color: ColorsUtils.color363, fontSize: Sizes.default16),
                                decoration: InputDecoration(
                                    border: const OutlineInputBorder(
                                      borderSide: BorderSide.none,
                                    ),
                                    isCollapsed: true,
                                    filled: true,
                                    fillColor: Colors.transparent,
                                    contentPadding: const EdgeInsets.symmetric(
                                        horizontal: Sizes.default10, vertical: Sizes.default10),
                                    constraints: const BoxConstraints(minHeight: Sizes.default40),
                                    hintText: '请输入手机号码',
                                    hintStyle: StylesUtils.customTextStyle(
                                        fontSize: Sizes.default15, color: ColorsUtils.color999)),
                                keyboardType: TextInputType.phone,
                                onChanged: (String content) {},
                              ))
                            ],
                          ),
                        ))
                      ],
                    ),
                  ),
                ],
              ),
            ),
            Container(
              height: Sizes.default50,
              alignment: Alignment.centerLeft,
              padding: const EdgeInsets.symmetric(horizontal: Sizes.default15),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  BrnCheckbox(
                    radioIndex: 0,
                    isSelected: agree,
                    iconPadding: const EdgeInsets.only(right: Sizes.default10),
                    onValueChangedAtIndex: (int index, bool value) {
                      setState(() {
                        agree = !agree;
                      });
                    },
                    childOnRight: true,
                    child: Text(
                      '我已阅读并同意签署',
                      style: StylesUtils.customTextStyle(
                          color: ColorsUtils.color999, fontSize: Sizes.default12),
                    ),
                  ),
                  TextButton(
                      onPressed: () {
                        Get.toNamed(RouteGet.userAboutProtocol);
                      },
                      child: Text(
                        '《支付服务协议》',
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.colorFf6, fontSize: Sizes.default12),
                      ))
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: Sizes.default15),
              height: Sizes.default50,
              child: FractionallySizedBox(
                widthFactor: 0.9,
                heightFactor: 0.9,
                child: GFButton(
                    onPressed: () {},
                    text: '确定',
                    textStyle: StylesUtils.customTextStyle(fontSize: Sizes.default16),
                    shape: GFButtonShape.pills,
                    type: GFButtonType.solid,
                    size: GFSize.LARGE,
                    color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorFf6)),
              ),
            )
          ],
        ),
      ),
    );
  }
}
